<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>JavaScript Event KeyCodes</title>
  <meta name="viewport" content="width=device-width, user-scalable=no">
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="JavaScript Event KeyCodes">
  <meta name="twitter:description" content="Keycode testing tool - which keys map to which keycodes?">
  <meta name="twitter:creator" content="@wesbos">
  <link rel="stylesheet" href="./style.css?v=11072020">
  <link rel="stylesheet" href="./ajax/libs/noty/3.1.4/noty.min.css" />
  <link rel="icon" href="">
</head>

<body>
  <canvas width="128" height="128" hidden></canvas>
  <div class="display">
    <table class="table hide">
      <thead>
        <tr>
          <th>Key Code</th>
          <th>Key</th>
        </tr>
      </thead>
      <tbody class="table-body">
      </tbody>
    </table>
    <div class="wrap" aria-live="polite" aria-atomic="true">
      <p class="keycode-display"></p>
      <p class="text-display">Press any key to get the JavaScript event keycode</p>
      <div class="cards hide">
        <div class="card item-key">
          <div class="card-header">event.key</div>
          <div class="card-main">
            <div class="main-description">key</div>
          </div>
        </div>
        <div class="card item-location">
          <div class="card-header">event.location
            <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/location" target="_blank" rel="noopener"
              class="more-info"></a>
          </div>
          <div class="card-main">
            <div class="main-description">location</div>
          </div>
        </div>
        <div class="card item-which">
          <div class="card-header">
            event.which
            <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent" target="_blank" rel="noopener"
              class="deprecated-link">(deprecated)</a>
          </div>
          <div class="card-main">
            <div class="main-description">which</div>
          </div>
        </div>
        <div class="card item-code">
          <div class="card-header">event.code</div>
          <div class="card-main">
            <div class="main-description">code</div>
          </div>
        </div>
      </div>
      <div class="mobile-input">
      </div>
    </div>
    <button onclick={toggleTable()} class="table-toggle-button">Table</button>
  </div>

  <script type='text/javascript'>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('./service-worker.js');
    }
  </script>
  <script src="./ajax/libs/noty/3.1.4/noty.min.js"></script>
  <script src="./scripts.js?v=06272019"></script>
</body>

</html>
